<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <link rel=stylesheet type=text/css href="layoutcss.css" />
</head>

<body>

    <div class="header">
        <h1>我的网页</h1>
        <p>重置浏览器大小查看效果。</p>
    </div>

    <div class="topnav">
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#" style="float:right">链接</a>
    </div>

    <div class="row">
        <div class="leftcolumn">
            <div class="card">
                <h2>文章标题</h2>
                <h5>2019 年 4 月 17日</h5>
                <div class="fakeimg" style="height:200px;">图片</div>
                <p>一些文本...</p>
                <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
            </div>
            <div class="card">
                <h2>文章标题</h2>
                <h5>2019 年 4 月 17日</h5>
                <div class="fakeimg" style="height:200px;">图片</div>
                <p>一些文本...</p>
                <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
            </div>
        </div>
        <div class="rightcolumn">
            <div class="card">
                <h2>关于我</h2>
                <div class="fakeimg" style="height:100px;">图片</div>
                <p>关于我的一些信息..</p>
            </div>
            <div class="card">
                <h3>热门文章</h3>
                <div class="fakeimg">
                    <p>图片</p>
                </div>
                <div class="fakeimg">
                    <p>图片</p>
                </div>
                <div class="fakeimg">
                    <p>图片</p>
                </div>
            </div>
            <div class="card">
                <h3>关注我</h3>
                <p>一些文本...</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <h2>底部区域</h2>
    </div>

</body>

</html>